<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <span>设备编号：</span>
        <el-input
          v-model="query.deviceNo"
          placeholder="请输入设备编号"
          class="handle-input mr10"
        ></el-input>

        <span>台区名称：</span>
        <el-input
          v-model="query.districtName"
          placeholder="请输入台区名称"
          class="handle-input mr10"
        ></el-input>

        <el-button type="default" @click="reset">重置</el-button>
        <el-button type="primary" :icon="Search" @click="handleSearch"
          >搜索</el-button
        >
        <el-checkbox
          v-model="query.deviceStatus"
          true-label="0"
          :false-label="''"
          @change="handleSearch"
          style="margin-left: 20px"
          >只看在线设备</el-checkbox
        >
      </div>
      <el-table
        v-loading="loading"
        :height="tableHeight"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column width="100" align="center" label="序号" fixed>
          <template v-slot="scope">
            {{ indexMethod(scope.$index, query.pageIndex, query.pageSize) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="districtName"
          label="台区名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deviceNo"
          label="设备编号"
          align="center"
        ></el-table-column>
        <el-table-column prop="deviceStatus" label="设备状态" align="center">
          <template v-slot="{ row }">
            {{ ["在线", "离线"][row.deviceStatus] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="currentMeasurementPeriod"
          label="当前计量周期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deviceMeteredElectricity"
          align="center"
          label="监测设备计量电量"
        >
        </el-table-column>
        <el-table-column
          prop="heartbeatTime"
          label="关联电表计量电量"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              plain
              @click="
                $router.push(
                  `/business/lineAnalyze?deviceNo=${scope.row.deviceNo}`
                )
              "
            >
              查看累计数据
            </el-button>
            <el-button type="primary" plain @click="showModal(scope.row)">
              查看历史数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      title="tcp数据列表"
      top="5vh"
      v-model="listVisible"
      width="80%"
      custom-class="dialogClass"
    >
      <el-table
        :data="TcpData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column width="100" align="center" label="序号" fixed>
          <template v-slot="scope">
            {{
              indexMethod(scope.$index, queryTcp.pageNumber, queryTcp.pageSize)
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="commCountIndex" label="通信计数索引" align="center" width="200"></el-table-column> -->
        <el-table-column
          prop="dateTime"
          label="日期"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="districtName"
          label="台区名称"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="deviceNo"
          label="设备ID"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="deviceStatus"
          label="设备状态"
          align="center"
          width="160"
        >
          <template v-slot="scope">
            {{ ["在线", "离线"][scope.row.deviceStatus] }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="oneChannelAccumulatedPower" label="A相累计电量" align="center" width="160"></el-table-column> -->
        <el-table-column
          prop="deviceMeteredElectricity"
          label="监测电量"
          align="center"
          width="160"
        ></el-table-column>
        <!-- <el-table-column prop="twoChannelAccumulatedPower" label="B相累计电量" align="center" width="160"></el-table-column> -->
        <el-table-column
          prop="electricityMeterMetering"
          label="关联电表电量"
          align="center"
          width="160"
        ></el-table-column>
        <!-- <el-table-column prop="threeChannelAccumulatedPower" label="三通道累计电量" align="center" width="160"></el-table-column> -->
        <el-table-column
          prop="energyLoss"
          label="电量损失"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="energyLossRate"
          label="电量损失率"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              @click="
                exportFn({ deviceNo: row.deviceNo, dateTime: row.dateTime })
              "
              >导出</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="prev, pager, next"
        @current-change="changeTpcList"
        :total="queryTcp.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { downFile } from "../../../utils/downFile";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { View, Search, Delete, Edit, Plus } from "@element-plus/icons-vue";
import {
  // getOnlneList,
  // getDevice,
  // createDevice,
  deleteDevice,
  // editDevice,
  TcpList,
  TcpChart,
  getNewDataList,
  getNewDeviceHistoryData,
  exportData,
} from "../../../api/index";
import { indexMethod, getViewPortHeight } from "../../../utils/tools";
// import { initChart } from "./CreateEchar";
const myChart = ref(null);
const tableHeight = getViewPortHeight() - 320;
interface TableItem {
  id: number;
  name: string;
  money: string;
  state: string;
  date: string;
  address: string;
}
const query = reactive({
  deviceNo: "",
  districtName: "",
  pageIndex: 1,
  pageSize: 10,
  deviceStatus: "", //
});
const queryTcp = reactive({
  pageNumber: 1,
  pageSize: 10,
  total: 0,
  deviceNo: null,
  passNo: "0",
  measurementStartTime: null,
  measurementEndTime: null,
  time: null,
});
const queryCharts = reactive({
  endDate: null,
  passNo: "0",
  startDate: null,
  deviceNo: null,
  time: null,
});

const loading = ref(true);
const tableData = ref<TableItem[]>([]);
const TcpData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = async () => {
  loading.value = true;
  const res = await getNewDataList({
    deviceNo: query.deviceNo,
    districtName: query.districtName,
    pageNumber: query.pageIndex,
    pageSize: query.pageSize,
    deviceStatus: query.deviceStatus,
  });
  loading.value = false;
  tableData.value = res.rows;
  pageTotal.value = res.total || 0;
  console.log(res);
};
getData();

const getTcp = async () => {
  let tiem1 = null;
  let tiem2 = null;

  const res = await getNewDeviceHistoryData({
    deviceNo: queryTcp.deviceNo,
    pageNumber: queryTcp.pageNumber,
    pageSize: queryTcp.pageSize,
  });
  TcpData.value = res.rows;
  queryTcp.total = res.total;

  // TcpList({
  //   pageNumber: queryTcp.pageNumber,
  //   pageSize: queryTcp.pageSize,
  //   deviceNo: queryTcp.deviceNo,
  //   passNo: queryTcp.passNo,
  //   startTime: tiem1,
  //   endTime: tiem2,
  // }).then((res: any) => {
  //   TcpData.value = res.rows;
  //   queryTcp.total = res.total;
  // });
};
// 查询操作
const reset = () => {
  query.deviceNo = "";
  query.districtName = "";
  getData();
};
const handleSearch = () => {
  query.pageIndex = 1;
  getData();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.pageIndex = val;
  getData();
};
// Tpc列表分页
const changeTpcList = (val: number) => {
  queryTcp.pageNumber = val;
  getTcp();
};
const chartVisible = ref(false);
const tipBoolen = ref(false);
// Tpc折线图
const getTcpChart = (val: any) => {
  let tiem1 = null;
  let tiem2 = null;
  if (val.deviceNo) {
    queryCharts.deviceNo = val.deviceNo;
  }
  chartVisible.value = true;
  TcpChart({
    deviceNo: queryCharts.deviceNo,
    endDate: tiem2,
    passNo: queryCharts.passNo,
    startDate: tiem1,
  }).then((val: any) => {
    const arr: any = [0];
    const titel: any = [""];
    console.log(val);
    tipBoolen.value = Boolean(val.rows.length);
    console.log(Boolean(val.rows.length));

    val.rows.forEach((item: any) => {
      arr.push(item.total);
      titel.push(item.dataTime);
    });
    // initChart(arr, titel);
  });
};
// 重置折现图
const chartReset = () => {
  (queryCharts.time = null),
    (queryCharts.passNo = "0"),
    getTcpChart(queryCharts);
};

// 删除操作
const handleDelete = (row: any) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      const res: any = await deleteDevice({ id: row.id });
      if (res.code === 200) {
        ElMessage.success("删除成功");
        getData();
      } else {
        ElMessage.error("删除失败");
      }
    })
    .catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
  name: "",
  address: "",
  deviceNo: "",
  electricNo: "",
  id: "",
  passNo: "",
  testNo: "",
});
const visibleType = ref("add");

// 新增
const add = () => {
  visibleType.value = "add";
  editVisible.value = true;
  form.deviceNo = "";
  form.electricNo = "";
  form.id = "";
  form.passNo = "";
  form.testNo = "";
};

const listVisible = ref(false);
const showModal = (item) => {
  listVisible.value = true;
  queryTcp.deviceNo = item.deviceNo;
  getTcp();
};

const exportFn = async (data) => {
  const res = await exportData(data);
  if (res) {
    downFile(res, `设备ID：${data.deviceNo} 日期：${data.dateTime}`);
  }
};
</script>
<style scoped lang="less"></style>
